﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"
          th:href="@{/static/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"
          th:href="@{/static/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"
          th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"
          th:href="@{/static/h-ui.admin/skin/default/skin.css}"/>
    <link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"
          th:href="@{/static/h-ui.admin/css/style.css}"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>歌曲列表</title>
    <!--<link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">-->
</head>
<body >
<!--<div class="pos-a" style="width:200px;left:0;top:0; bottom:0; height:100%; border-right:1px solid #e5e5e5; background-color:#f5f5f5; overflow:auto;">-->
<!--<ul id="treeDemo" class="ztree"></ul>-->
<!--</div>-->

<div >
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> <a style="text-decoration:none" href="/welcome.html"> 首页 </a> <span class="c-gray en">&gt;</span> 歌曲管理 <span
            class="c-gray en">&gt;</span> 歌曲列表 <a class="btn btn-success radius r"
                                                  style="line-height:1.6em;margin-top:3px"
                                                  href="javascript:location.replace(location.href);" title="刷新"><i
            class="Hui-iconfont">&#xe68f;</i></a></nav>
    <div class="page-container">
        <!--<div class="text-c"> 日期范围：-->
        <!--<input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}' })" id="logmin" class="input-text Wdate" style="width:120px;">-->
        <!-- - -->
        <!--<input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d' })" id="logmax" class="input-text Wdate" style="width:120px;">-->
        <form action="/song/search">
            <input type="text" name="searchName" id="searchName" placeholder=" 歌曲名称" style="width:250px" class="input-text">
            <input type="text" name="searchNickName" id="searchByUser" placeholder=" 创建人" style="width:250px" class="input-text">
            <input type="hidden" name="cid" id="cid" value="11" style="width:250px" class="input-text">
            <button name="" id="searchBtn" class="btn btn-success" type="submit"><i class="Hui-iconfont">&#xe665;</i> 搜歌曲</button>
            <span class="label label-danger radius" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></span>
        </form>
    </div>
    <div class="cl pd-5 bg-1 bk-gray mt-20">
            <span class="l">
                <!--<a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a>-->
                <!--<a class="btn btn-primary radius" onclick="product_add('添加产品','product-add.html')" href="javascript:;"><i class="Hui-iconfont">&#xe600;</i> 添加产品</a>-->
            </span>
        <span class="r">共有数据：<strong th:text="${count}">54</strong> 条</span></div>
    <div class="mt-20">
        <table class="table table-border table-bordered table-bg table-hover table-sort">
            <thead>
            <tr class="text-c">
                <th width="40"><input name="" type="checkbox" value=""></th>
                <th width="40">ID</th>
                <th width="40">风格</th>
                <th width="40">状态</th>
                <th width="60">封面</th>
                <th width="100">歌名</th>
                <!--<th>描述</th>-->
                <!--<th width="60">创建人</th>-->
                <!--<th width="100">创建时间</th>-->
                <!--<th width="60">播放量</th>-->
                <!--<th width="60">收藏量</th>-->
                <!--<th width="60">审核时间</th>-->
                <th width="60">审核状态</th>
                <th width="40">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr class="text-c va-m" th:each="music:${musics}">
                <td><input name="" type="checkbox" value="" th:value="*{musicId}"></td>
                <td th:text="${musicStat.count}">001</td>
                <td th:text="${music.style}"></td>
                <td th:text="${music.power}"></td>
                <td>
                    <!--<a onClick="product_show('哥本哈根橡木地板','product-show.html','10001')" href="javascript:;">-->
                    <img width="60" class="product-thumb" src="temp/product/Thumb/6204.jpg" th:src="${music.img}">
                    <!--</a>-->
                </td>
                <td th:text="${music.musicName}"></td>
                <!--<td th:text="${music.description}"></td>-->
                <!--<td th:text="${music.nickname}"></td>-->
                <!--<td th:text="${music.createtime}"></td>-->
                <!--<td th:text="${music.playbackVolume}"></td>-->
                <!--<td th:text="${music.collectionVolume}"></td>-->

                <td class="td-status">
                    <span class="label label-warning radius" th:text="${music.shenhestate}"
                          th:if="${#strings.equals('待审核',music.shenhestate)}">已发布</span>
                </td>
                <td class="td-manage" th:id="${music.musicId}" th:if="${session.admin.code.id ==2 || session.admin.code.id ==23}">
                    <a style="text-decoration:none" th:id="${music.musicId}+'a'" onClick="product_shenhe(this)" href="javascript:;" title="审核"><i
                            class="Hui-iconfont">&#xe603;</i></a>
                    <a style="text-decoration:none" th:id="${music.musicId}+'m'" class="a" onClick="musicplay(this)"
                       href="javascript:;" title="试听">
                        <i class="Hui-iconfont">&#xe6e6;</i>
                    </a>
                    <input type="hidden" th:value="${music.cid}">
                    <a style="text-decoration:none" onClick="information('详情',this)" href="javascript:;" title="详情">
                        <i class="Hui-iconfont">&#xe72d;</i>
                    </a>
                    <!--<a style="text-decoration:none" class="ml-5" onClick="product_edit('产品编辑','product-add.html','10001')" href="javascript:;" title="编辑">-->
                    <!--<i class="Hui-iconfont">&#xe6df;</i>-->
                    <!--</a> -->
                    <!--<a style="text-decoration:none" class="ml-5" onClick="product_del(this,'10001')" href="javascript:;"-->
                       <!--title="删除">-->
                        <!--<i class="Hui-iconfont">&#xe6e2;</i>-->
                    <!--</a>-->
                </td>
                <td th:if="${session.admin.code.id !=2 and session.admin.code.id !=23}">无操作权限</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</div>
<div id="player11" style="display:none">
    <audio id="" name="audio" src="" controls="controls"></audio>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"
        th:src="@{/lib/jquery/1.9.1/jquery.min.js}"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js" th:src="@{/static/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"
        th:src="@{/static/h-ui.admin/js/H-ui.admin.js}"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<!--<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>-->
<script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"
        th:src="@{/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"
        th:src="@{/lib/datatables/1.10.0/jquery.dataTables.min.js}"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js" th:src="@{/lib/laypage/1.2/laypage.js}"></script>
<script type="text/javascript">
    // var setting = {
    // 	view: {
    // 		dblClickExpand: false,
    // 		showLine: false,
    // 		selectedMulti: false
    // 	},
    // 	data: {
    // 		simpleData: {
    // 			enable:true,
    // 			idKey: "id",
    // 			pIdKey: "pId",
    // 			rootPId: ""
    // 		}
    // 	},
    // 	callback: {
    // 		beforeClick: function(treeId, treeNode) {
    // 			var zTree = $.fn.zTree.getZTreeObj("tree");
    // 			if (treeNode.isParent) {
    // 				zTree.expandNode(treeNode);
    // 				return false;
    // 			} else {
    // 				//demoIframe.attr("src",treeNode.file + ".html");
    // 				return true;
    // 			}
    // 		}
    // 	}
    // };
    //
    // var zNodes =[
    // 	{ id:1, pId:0, name:"一级分类", open:true},
    // 	{ id:11, pId:1, name:"二级分类"},
    // 	{ id:111, pId:11, name:"三级分类"},
    // 	{ id:112, pId:11, name:"三级分类"},
    // 	{ id:113, pId:11, name:"三级分类"},
    // 	{ id:114, pId:11, name:"三级分类"},
    // 	{ id:115, pId:11, name:"三级分类"},
    // 	{ id:12, pId:1, name:"二级分类 1-2"},
    // 	{ id:121, pId:12, name:"三级分类 1-2-1"},
    // 	{ id:122, pId:12, name:"三级分类 1-2-2"},
    // ];
    //

    /*产品-审核*/
    function product_shenhe(obj) {
        var musicId = $(obj).parent().attr("id");
        layer.confirm(
            '审核歌曲？', {
                btn: ['通过', '不通过'],
                shade: false
            },
            function () {
                $.ajax({
                    type: "POST",
                    url: "/song/audit",
                    data: {
                        cid: 10,
                        musicId: musicId
                    },
                    success: function (data) {
                        // $(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="product_shenhe(this)" href="javascript:;" title="审核"><i class="Hui-iconfont">&#xe6de;</i></a>');
                        // $(obj).siblings("span").remove();
                        // $(obj).parents("tr").find(".td-manage").prepend('<span>已审核</span>');
                        $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">审核通过</span>');
                        // $(obj).remove();
                        $(obj).parent().find("input").attr("value",10);
                        $(obj).replaceWith('<a style="text-decoration:none" id="' + data.musicId + 'a" onClick="music_xiu(this)" href="javascript:;" title="修改为不通过"><i class="Hui-iconfont">&#xe6dd;</i>');
                        layer.msg(data.msg, {icon: 6, time: 1000});
                    }
                });

            },
            function () {
                var title = "驳回原因";
                var url = "/song/reason/" + musicId;
                reason(title, url);
            });
    }

    /**
     * 更改状态为审核未通过
     * */
    function change(obj) {
        // $(obj).siblings("span").remove();
        // $(obj).parents("tr").find(".td-manage").prepend('<span>已审核</span>');
        $(obj).parents("tr").find(".td-status").html('<span class="label label-danger radius">审核未通过</span>');
        $(obj).parent().find("input").attr("value",12);
        // $(obj).remove();
        $(obj).replaceWith('<a style="text-decoration:none" onClick="music_t(this)" href="javascript:;" title="修改为通过"\n' +

            '                        <i class="Hui-iconfont">&#xe6e1;</i>\n' +
            '                    </a>');
        layer.msg('已修改', {icon: 6, time: 1000});
    }

    /**
     * 更改歌曲状态为通过
     * */
    function music_t(obj) {
        var musicId = $(obj).parent().attr("id");
        layer.confirm(
            '修改为通过审核？', {
                btn: ['是', '否'],
                shade: false
            },
            function () {
                $.ajax({
                    type: "POST",
                    url: "/song/audit",
                    data: {
                        cid: 10,
                        musicId: musicId
                    },
                    success: function (data) {
                        // $(obj).parents("tr").find(".td-manage").prepend('<a class="c-primary" onClick="product_shenhe(this)" href="javascript:;" title="审核"><i class="Hui-iconfont">&#xe6de;</i></a>');
                        // $(obj).siblings("span").remove();
                        // $(obj).parents("tr").find(".td-manage").prepend('<span>已更改</span>');
                        $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">审核通过</span>');
                        $(obj).parent().find("input").attr("value",10);
                        // $(obj).remove();
                        $(obj).replaceWith('<a style="text-decoration:none" id="' + data.musicId + 'a" onClick="music_xiu(this)" href="javascript:;" title="修改为不通过"><i class="Hui-iconfont">&#xe6dd;</i>');
                        layer.msg(data.msg, {icon: 6, time: 1000});
                    }
                });

            },
            function () {

            }
        )
    }

    /**
     *更改歌曲状态为不通过
     * */
    function music_xiu(obj) {
        var musicId = $(obj).parent().attr("id");
        layer.confirm(
            '更改歌曲状态为不通过？', {
                btn: ['是', '否'],
                shade: false
            },
            function () {
                var title = "驳回原因";
                var url = "/song/reason/" + musicId;
                reason(title, url);
            },
            function () {
            }
        );
    }

    /**
     * 弹出驳回原因页面
     * */
    function reason(title, url) {
        var index = layer.open({
            type: 2,
            title: title,
            content: url
        });
        layer.full(index);
    }

    /**
     * 暂停试听
     */
    function music_stop(obj) {
        // var audio = document.getElementById('audio');
        var audio = document.getElementsByTagName("audio")[0];
        if (audio !== null) {
            //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
            // alert(audio.paused);
            if (audio.paused) {
                audio.play();
            } else {
                audio.pause();
            }
        }
        // $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="a" onClick="musicplay(this)" href="javascript:;" title="试听">\n' +
        //     '<i class="Hui-iconfont">&#xe6e6;</i>\n' +
        //     '</a>');
        // $(obj).remove();
        $(obj).replaceWith('<a style="text-decoration:none" class="a" onClick="musicplay(this)" href="javascript:;" title="试听">\n' +
            '<i class="Hui-iconfont">&#xe6e6;</i>\n' +
            '</a>')
    }

    /**
     * 试听
     */
    function musicplay(obj) {
        var musicId = $(obj).parent().attr("id");
        var url = "/song/shiting/" + musicId;
        $.get(url, function (data) {
            // var audio = document.getElementById('audio');
            $("audio:first").attr("src", data.address);
            var audio = document.getElementsByTagName("audio")[0];
            audio.play();//audio.play();// 播放
            $(".b").attr("class", "a");
            $("audio:first").attr("id", musicId);
            // $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" class="b" id="' + musicId + 'm" onClick="music_stop(this)" href="javascript:;" title="停止"><i class="Hui-iconfont">&#xe6e4;</i></a>');
            // $(obj).remove();
            $(obj).replaceWith('<a style="text-decoration:none" class="b" id="\' + musicId + \'m" onClick="music_stop(this)" href="javascript:;" title="停止"><i class="Hui-iconfont">&#xe6e4;</i></a>');
            $(".a").replaceWith('<a style="text-decoration:none" class="a" onClick="musicplay(this)" href="javascript:;" title="试听">\n' +
                '<i class="Hui-iconfont">&#xe6e6;</i>\n' +
                '</a>');
        });
    }
    /**
     * 详情
     * */
    function information(title, obj) {
        var musicId = $(obj).parent().attr("id");
        var cid=$(obj).parent().find("input").val();
        var url="/song/getInfo?musicId="+musicId+"&&cid="+cid
        layer.open({
            type: 2,
            title: title,
            area: ['630px', '630px'],
            content: url
        });
        // layer.full(index);
    }

    // $(document).ready(function() {
    // 	var t = $("#treeDemo");
    // 	t = $.fn.zTree.init(t, setting, zNodes);
    // 	demoIframe = $("#testIframe");
    // 	demoIframe.on("load", loadReady);
    // 	var zTree = $.fn.zTree.getZTreeObj("tree");
    // 	zTree.selectNode(zTree.getNodeByParam("id",'11'));
    // });

    $('.table-sort').dataTable({
        "aaSorting": [
            [1, "asc"]
        ],//默认第几个排序
        "bStateSave": false,//状态保存
        "aoColumnDefs": [
            {"orderable": false, "aTargets": [0 , 6]}// 制定列不参与排序
        ]
    });

    /*产品-添加*/
    function product_add(title, url) {
        var index = layer.open({
            type: 2,
            title: title,
            content: url
        });
        layer.full(index);
    }

    /*产品-查看*/
    function product_show(title, url, id) {
        var index = layer.open({
            type: 2,
            title: title,
            content: url
        });
        layer.full(index);
    }


    /*产品-下架*/
    function product_stop(obj, id) {
        layer.confirm('确认要下架吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="product_start(this,id)" href="javascript:;" title="发布"><i class="Hui-iconfont">&#xe603;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已下架</span>');
            $(obj).remove();
            layer.msg('已下架!', {icon: 5, time: 1000});
        });
    }

    /*产品-发布*/
    function product_start(obj, id) {
        layer.confirm('确认要发布吗？', function (index) {
            $(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="product_stop(this,id)" href="javascript:;" title="下架"><i class="Hui-iconfont">&#xe6de;</i></a>');
            $(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已发布</span>');
            $(obj).remove();
            layer.msg('已发布!', {icon: 6, time: 1000});
        });
    }

    /*产品-申请上线*/
    function product_shenqing(obj, id) {
        $(obj).parents("tr").find(".td-status").html('<span class="label label-default radius">待审核</span>');
        $(obj).parents("tr").find(".td-manage").html("");
        layer.msg('已提交申请，耐心等待审核!', {icon: 1, time: 2000});
    }

    /*产品-编辑*/
    function product_edit(title, url, id) {
        var index = layer.open({
            type: 2,
            title: title,
            content: url
        });
        layer.full(index);
    }

    /*产品-删除*/
    function product_del(obj, id) {
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                type: 'POST',
                url: '',
                dataType: 'json',
                success: function (data) {
                    $(obj).parents("tr").remove();
                    layer.msg('已删除!', {icon: 1, time: 1000});
                },
                error: function (data) {
                    console.log(data.msg);
                },
            });
        });
    }

</script>
</body>
</html>